<template>
  <div class="contant">
    <img src="/static/imgs/pk/live.png" alt="" class="top1">
    <img src="/static/imgs/pk/live.png" alt="" class="top2">
    <img src="/static/imgs/pk/die.png" alt="" class="top3">
    <img src="/static/imgs/pk/texiao.png" alt="" class="mid1">
    <!--<img src="/static/imgs/pk/die.png" alt="" class="bom1">-->
    <div class="bom1">
      <img :src="'http://www.kaimou.net/sanguoImgs/'+parms.pic2[3]+'.jpg'" alt="">
      <img src="/static/imgs/hero/heroKuang.png" alt="">
      <div class="oneT" id="oneT">2</div>
      <div class="oneB">{{heroImgs[parms.pic2[3]]}}</div>
    </div>
    <div class="bom2">
      <img :src="'http://www.kaimou.net/sanguoImgs/'+parms.pic1[3]+'.jpg'" alt="">
      <img src="/static/imgs/hero/heroKuang.png" alt="">
      <div class="threeT" id="threeT">1</div>
      <div class="threeB">{{heroImgs[parms.pic1[3]]}}</div>
    </div>
    <div class="bom3">
      <img :src="'http://www.kaimou.net/sanguoImgs/'+parms.pic3[3]+'.jpg'" alt="">
      <img src="/static/imgs/hero/heroKuang.png" alt="">
      <div class="twoT" id="twoT">3</div>
      <div class="twoB">{{heroImgs[parms.pic3[3]]}}</div>
    </div>
    <img src="/static/imgs/pk/jineng.png" alt="" class="mid2">
    <div class="head">
      <img src="/static/imgs/index/nohead.jpg" alt="" class="headPic">
      <div class="headName">你的名字</div>
    </div>
    <div class="nowMoney">
      <div class="nowNum">123456</div>
    </div>
    <div class="zhanji">
      <div class="zhanjiPic">
        <img src="/static/imgs/pk/out.png" alt="">
        <img src="/static/imgs/pk/ping.png" alt="">
        <img src="/static/imgs/pk/win.png" alt="">
      </div>
    </div>
    <img src="/static/imgs/pk/addMoney.png" alt="" class="addMoney" @click="addMoney">
    <com-bets></com-bets>
  </div>
</template>

<script>
  import bets from '@/components/bets'
  import api from '@/api'
  import { Indicator, Toast } from 'mint-ui'
  export default {
    name: 'pk',
    data () {
      return {
        parms: this.$route.query,
        heroImgs:api.heroImgs
      }
    },
    methods: {
      addMoney () {
        this.$store.commit('openBets');
        console.log(this.$store.state.tan)
      }
    },
    mounted () {
      App.init();
      Indicator.open({
        spinnerType: 'fading-circle'
      });
      let that = this;
        App.pk(parseInt(that.parms.picid1),parseInt(that.parms.picid2),parseInt(that.parms.picid3));
//        App.wrest();
//      api.instance.wrest(1,2,3,function(error, result){
//        console.log(error);
//        console.log(result);
//      });
      let timer = setInterval(function () {
        api.instance.wrestEvent(function (error,result) {
          console.log(result.args);
          if ((result.args.wrestler1.toString() === api.defaultAccount || result.args.wrestler2.toString() === api.defaultAccount) && (result.args.wrestler2.toString().indexOf('000000000')<0)){
            clearInterval(timer);
            Indicator.close();
            console.log(result.args.wrestler2.toString());
            if(api.defaultAccount === result.args.theWinner.toString()){
              Toast('你赢了');
              setTimeout(function () {
                that.$router.push('/');
              },2000)
            }else {
              Toast('你输了');
              setTimeout(function () {
                that.$router.push('/');
              },2000)
            }
          }
        })
      },500)
//     setTimeout(function () {
//        api.instance.wrestEvent(function (error,result) {
//          console.log(error);
//          if (!error)
//            Indicator.close();
//            console.log(result.args)
//        })
//      },1500)
    },
    components: {
      'com-bets': bets
    }
  }
</script>

<style scoped  lang="less">
  .contant{
    height: 100%;
    background-image: url("/static/imgs/pk/bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: white;
    .top1{
      width: 33%;
      position: absolute;
      top:0;
      left: 3%;
    }
    .top2{
      width: 40%;
      position: absolute;
      top:3%;
      left: 31%;
    }
    .top3{
      width: 33%;
      position: absolute;
      top:0;
      right: 3%;
    }
    .mid1{
      width: 80%;
      position: absolute;
      top:15%;
      right: 0;
    }
    .mid2{
      width:90%;
      position: absolute;
      top:37%;
      left: 0;
    }
    .bom1{
      width: 27%;
      position: absolute;
      top: 62%;
      left: 5%;
      height: 18.7%;
      overflow: hidden;
      img{
        position: absolute;
        width: 100%;
      }
      .oneT{
        position: absolute;
        width: 15%;
        height: 2rem;
        z-index: 6;
        top: 1px;
        left: 6px;
        text-align: center;
        line-height: 2rem;
      }
      .oneB{
        position: absolute;
        width: 50%;
        height: 1.4rem;
        z-index: 6;
        bottom: 0;
        left: 12px;
        text-align: left;
        line-height: 1.4rem;
        font-size: 0.8rem;
      }
    }
    .bom2{
      width: 33%;
      position: absolute;
      top: 55%;
      left: 33.5%;
      height: 23%;
      overflow: hidden;
      img{
        position: absolute;
        width: 100%;
      }
      .threeT{
        position: absolute;
        width: 15%;
        height: 2rem;
        z-index: 6;
        top: 5px;
        left: 8px;
        text-align: center;
        line-height: 2rem;
      }
      .threeB{
        position: absolute;
        width: 50%;
        height: 1.5rem;
        z-index: 6;
        bottom: 0px;
        left: 12px;
        text-align: left;
        line-height: 1.5rem;
        font-size: 1rem;
      }
    }
    .bom3{
      width: 27%;
      position: absolute;
      top:62%;
      right: 5%;
      height: 18.7%;
      overflow: hidden;
      img{
        position: absolute;
        width: 100%;
      }
      .twoT{
        position: absolute;
        width: 15%;
        height: 2rem;
        z-index: 6;
        top: 1px;
        left: 6px;
        text-align: center;
        line-height: 2rem;
      }
      .twoB{
        position: absolute;
        width: 50%;
        height: 1.4rem;
        z-index: 6;
        bottom: 0;
        left: 12px;
        text-align: left;
        line-height: 1.4rem;
        font-size: 0.8rem;
      }
    }
    .head{
      width: 28.8%;
      position: absolute;
      height:18%;
      background-image: url("/static/imgs/index/head.png");
      background-size: 100%;
      background-repeat: no-repeat;
      bottom: 2%;
      left: 3%;
      .headPic{
        width: 73%;
        border-radius: 50%;
        margin-left: 12%;
        margin-top: 8%;
      }
      .headName{
        color: white;
        font-size: 1rem;
        width: 80%;
        margin-left: 8%;
        margin-top: -1%;
        text-align: center;
      }
    }
    .nowMoney{
      width: 34%;
      background-image: url("/static/imgs/pk/chouma.png");
      background-size: 100%;
      background-repeat: no-repeat;
      left: 31%;
      bottom: 11%;
      position: absolute;
      height: 3%;
      .nowNum{
        color: white;
        position: absolute;
        width: 80%;
        left: 77%;
        font-size: 1.3rem;
        top: -7%;
      }
    }
    .zhanji{
      width: 34%;
      background-image: url("/static/imgs/pk/zhanji.png");
      background-size: 100%;
      background-repeat: no-repeat;
      left: 30%;
      bottom: 7%;
      position: absolute;
      height: 4%;
      .zhanjiPic{
        color: white;
        position: absolute;
        width: 80%;
        left: 49%;
        font-size: 1.3rem;
        top: -7%;
      }
      .zhanjiPic>img{
        width: 20%;
        margin-top: 8%;
      }
    }
    .addMoney{
      width: 27%;
      position: absolute;
      bottom: 1%;
      right: 4%;
      z-index: 1;
    }
  }
</style>
